<%--
  Created by IntelliJ IDEA.
  User: pc
  Date: 2025/1/5
  Time: 9:50
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" isELIgnored="false" language="java" pageEncoding="utf-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html lang="zh-CN">
<head>
    <title>音乐管理</title>
    <meta charset="UTF-8">
    <link rel="stylesheet"
          href="<%=request.getContextPath()%>/static/plugins/bootstrap-4.6.2-dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="<%=request.getContextPath()%>/static/css/admin/musicMng.css">
    <link rel="stylesheet"
          href="<%=request.getContextPath()%>/static/plugins/bootstrap-icons-1.11.3/font/bootstrap-icons.min.css">
</head>
<body>
<!-- 主要内容区域 -->
<div class="main-content">
    <div class="row">
        <!-- 音乐主要内容 -->
        <div class="col-md-9">
            <!-- 第一部分：搜索和筛选部分 -->
            <div class="row mb-4">
                <div class="col-md-12">
                    <form class="form-inline">
                        <div class="form-group">
                            <label for="songTitle">歌曲名称：</label>
                            <input type="text" class="form-control" id="songTitle" placeholder="请输入歌曲名称">
                        </div>
                    </form>
                    <button type="submit" class="btn btn-primary" id="searchButton">查询</button>
                </div>
            </div>
            <!-- 第二部分：歌曲信息表格 -->
            <div class="row mb-4">
                <div class="col-md-12">
                    <table class="table table-striped">
                        <thead>
                        <tr>
                            <th>歌曲ID</th>
                            <th>歌曲名称</th>
                            <th>简介</th>
                            <th>上传者ID</th>
                            <th>歌曲分类</th>
                            <th>操作</th>
                        </tr>
                        </thead>
                        <tbody>
                        <c:forEach var="song" items="${sessionScope.songList}">
                            <tr>
                                <td>${song.songId}</td>
                                <td>${song.title}</td>
                                <td>${song.description}</td>
                                <td>${song.uploaderId}</td>
                                <td>
                                    <c:choose>
                                        <c:when test="${song.categoryId == 1}">
                                            <button class="btn btn-success btn-sm">流行音乐</button>
                                        </c:when>
                                        <c:when test="${song.categoryId == 2}">
                                            <button class="btn btn-secondary btn-sm">摇滚音乐</button>
                                        </c:when>
                                        <c:when test="${song.categoryId == 3}">
                                            <button class="btn btn-success btn-sm">电子音乐</button>
                                        </c:when>
                                        <c:when test="${song.categoryId == 4}">
                                            <button class="btn btn-secondary btn-sm">经典音乐</button>
                                        </c:when>
                                    </c:choose>
                                </td>
                                <td>
                                    <div class="btn-group">
                                        <!-- 修改 data-toggle="modal" data-target="#exampleModal${user.userId}"-->
                                            <%--                                        <button class="btn btn-sm btn-warning edit-btn"--%>
                                            <%--                                                data-toggle="modal"--%>
                                            <%--                                                data-target="#editUserModal${user.userId}"--%>
                                            <%--                                                data-id="${user.userId}"--%>
                                            <%--                                                onclick="fillEditModal(${user.userId})">修改--%>
                                            <%--                                        </button>--%>
                                        <button class="btn btn-sm btn-warning edit-btn" data-id="${song.songId}">修改
                                        </button>
                                        <button class="btn btn-sm btn-danger delete-btn" data-id="${song.songId}">删除
                                        </button>
                                    </div>
                                </td>
                            </tr>
                        </c:forEach>
                        </tbody>
                    </table>
                </div>
            </div>
            <!-- 第三部分：分页导航 -->
            <div class="row">
                <c:choose>
                    <c:when test="${totalPagesM > 1}">
                        <nav aria-label="Page navigation">
                            <ul class="pagination">
                                <!-- 上一页按钮 -->
                                <c:if test="${currentPageM > 1}">
                                    <li class="page-item">
                                        <a class="page-link"
                                           href="<%=request.getContextPath()%>/admin/musicListServlet?startIndex=${(currentPageM - 2) * targetTotalM}&targetTotal=${targetTotalM}"
                                           aria-label="Previous">
                                            <span aria-hidden="true">&laquo;</span>
                                        </a>
                                    </li>
                                </c:if>
                                <!-- 动态生成页码 -->
                                <c:forEach var="i" begin="1" end="${totalPagesM}">
                                    <c:choose>
                                        <c:when test="${i <= 3 || (i > currentPageM - 2 && i < currentPageM + 2) || i == totalPagesM}">
                                            <li class="page-item <c:if test="${i == currentPageM}">active</c:if>">
                                                <a class="page-link"
                                                   href="<%=request.getContextPath()%>/admin/musicListServlet?startIndex=${(i - 1) * targetTotalM}&targetTotal=${targetTotalM}">${i}</a>
                                            </li>
                                        </c:when>
                                        <c:otherwise>
                                            <!-- 在需要的地方显示 "..." -->
                                            <li class="page-item disabled">
                                                <span class="page-link">...</span>
                                            </li>
                                        </c:otherwise>
                                    </c:choose>
                                </c:forEach>
                                <!-- 下一页按钮 -->
                                <c:if test="${currentPageM < totalPagesM}">
                                    <li class="page-item">
                                        <a class="page-link"
                                           href="<%=request.getContextPath()%>/admin/musicListServlet?startIndex=${currentPageM * targetTotalM}&targetTotal=${targetTotalM}"
                                           aria-label="Next">
                                            <span aria-hidden="true">&raquo;</span>
                                        </a>
                                    </li>
                                </c:if>
                            </ul>
                        </nav>
                    </c:when>
                    <c:otherwise>
                        <!-- 如果只有一页数据，不显示分页 -->
                        <p></p>
                    </c:otherwise>
                </c:choose>
            </div>
        </div>
    </div>
</div>
<!-- 修改用户信息模态框 -->
<!--修改了class fade id ${user.userId}-->
<div class="modal fade" id="editMusicModal" tabindex="-1" role="dialog" aria-labelledby="editUserModalLabel"
     aria-hidden="true">

    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="editUserModalLabel">修改歌曲信息</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form id="editSongForm">
                    <%-- 隐藏用户id，不让客户端修改 --%>
                    <div class="form-group" style="display: none;">
                        <label for="songId">歌曲ID</label>
                        <input type="text" class="form-control" id="songId">
                    </div>
                    <div class="form-group">
                        <label for="title">歌曲名称</label>
                        <input type="text" class="form-control" id="title">
                    </div>
                    <div class="form-group">
                        <label for="description">歌曲简介</label>
                        <input type="text" class="form-control" id="description">
                    </div>
                    <div class="form-group">
                        <label for="uploaderId" >上传人员ID</label>
                        <input type="text" class="form-control" id="uploaderId" readonly>
                    </div>

                    <%--                        只读歌曲分类--%>
                    <div class="form-group">
                        <label for="categoryId">状态</label>
                        <select class="form-control" id="categoryId">
                            <option value="1">流行音乐</option>
                            <option value="2">摇滚音乐</option>
                            <option value="3">电子音乐</option>
                            <option value="4">经典音乐</option>
                        </select>
                    </div>
                    <!-- 上传文件 -->
                    <div class="form-group">
                        <label for="musicFile">上传文件 (.mp3)</label>
                        <input type="file" class="form-control-file" id="musicFile" name="musicFile" accept=".mp3" required />
                    </div>
                    <button type="submit" class="btn btn-primary" >保存修改</button>
                </form>
            </div>
        </div>
    </div>
</div>
<!-- 提示框 -->
<div id="alertMessage" class="alert alert-success" style="display:none;" role="alert">
    用户新增成功！
</div>
<div id="errorMessage" class="alert alert-danger" style="display:none;" role="alert">
    用户新增失败，请重试！
</div>


<!-- 提示框 -->
<div id="editSongMsg" class="alert alert-success" style="display:none"></div>
<script src="<%=request.getContextPath()%>/static/plugins/jquery/jquery.min.js"></script>
<script src="<%=request.getContextPath()%>/static/plugins/bootstrap-4.6.2-dist/js/bootstrap.bundle.js"></script>
<script src="<%=request.getContextPath()%>/static/js/util.js"></script>
<script src="<%=request.getContextPath()%>/static/js/admin/musicMng.js"></script>
</body>
</html>
